<{use class="frontend\assets\FancyBoxAsset"}>
<{FancyBoxAsset::register($this)|void}>
<{use class="frontend\assets\SwiperAsset"}>
<{SwiperAsset::register($this)|void}>
<style>
    .raising_confirm{
        position: absolute;
        left: 0;
        width: 100%;
        top: 51px;
        background: #fff;
        height: 100%;
    }
</style>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>


<div class="content margin_top_foot">
    <header class="header fixed_top bg_mx_green"></header>
    <form class="all raising_mask">
        <div class="raising_confirm" style="
        ">
            <div class="padding_15 confirm_number bg_white" style="margin-bottom: 50px;">
                <div class="padding_v_15 flex border_b" style="padding-top: 0px;">
                    <div class="width_100">
                        <img src="<{$pig['img']}>" alt="" style="min-height: 87px;max-height: 87px;">
                    </div>
                    <div class="left_100 padding_l_15 font_12">
                        <div class=""><{$pig['title']}></div>
                        <div class="">品种：<{$pig['vname']}></div>
                        <div class="">代养农户：<{$pig['farmer']}></div>
                        <div class="">批次：<{$pig['batch']}></div>
                        <div class="">定金：<{$pig['price']}>元，预付尾款：<{$pig['ling_total_price']}>元</div>
                    </div>
                </div>
                <div class="padding_10_15 flex border_b">
                    <div class="width_70">姓名</div>
                    <div class="left_70">
                        <input type="text" name="name" value="<{$user['realname']}>" placeholder="请输入姓名" request title="姓名">
                    </div>
                </div>
                <div class="padding_15 flex border_b">
                    <div class="width_100">图形码</div>
                    <div class="left_70">
                        <input type="text" name="pcode" value="" placeholder="请填入图形验证码" request title="图形验证码" >
                    </div>
                    <div class="width_100 border_l text_center"><img style="height: 30px;" id="imgVerifyCode" onclick="changeVerifyCode()"  alt="验证码"></div>
                </div>
                <div class="padding_15 flex border_b">
                    <div class="width_100">手机号</div>
                    <div class="left_70">
                        <input type="text" name="tel" value="<{$user['phone']}>" placeholder="请填入手机号" request title="手机号" data-pattern="^(0|86|17951)?(13\d|15[0-35-9]|17[678]|18\d|14[57])\d{8}$" data-tips="11位手机号">
                    </div>
                    <div class="width_100 border_l text_center" onclick="get_code()">发送验证码</div>
                </div>
                <div class="padding_10_15 flex border_b">
                    <div class="width_70">手机验证码</div>
                    <div class="left_70">
                        <input type="text" name="code" placeholder="请输入手机短信验证码" request title="手机验证码">
                    </div>
                </div>
                <div class="padding_10_15 flex border_b">
                    <div class="width_70">收货时间</div>
                    <div class="left_70">
                        <input type="date" name="wanttime" value="" placeholder="请填入期望收货时间" >
                    </div>
                </div>
                <div class="padding_10_15 flex border_b">
                    <div class="width_70">数量</div>
                    <div class="left_70">
                        <select name="buynum" id="buynum">

                        </select>
                    </div>
                </div>
                <div class="padding_10_15 flex border_b">
                    <div class="width_70">收货地址</div>
                    <div class="left_70">
                        <textarea name="address" placeholder="请输入收货地址" request title="收货地址"></textarea>
                    </div>
                </div>
                <div class="padding_10_15 flex border_b">
                    <div class="width_70">备注</div>
                    <div class="left_70">
                        <textarea name="remark" placeholder="请输入备注"></textarea>
                    </div>
                </div>
                <div class="padding_10_15 flex border_b">
                    <div class="width_70">增值服务</div>
                    <div class="left_70">
                            <p><{$add_service}></p>
                    </div>
                </div>
                <div class="padding_10_15 flex border_b">
                    <div class="width_70">是否同意</div>
                    <div class="left_70">
                        <input class="checkbox" type="checkbox" request title="必须确认并同意认养协议" name="xieyi" id=""><a href="<{url route='/shop/rasing/xieyi'}>">《<{$article['title']}>》</a><a href="<{$fileurl}>">下载</a>
                    </div>
                </div>

                <input name="_csrf" type="hidden" id="_csrf" value="<{$app->request->csrfToken}>">
                <input type="hidden" name="pigid" value="<{$id}>">
            </div>
            <button class="fixed_bottom bg_mx_green font_16 text_center lineheight_50" style="border: none;border-radius: 0">支付定金</button>
        </div>
    </form>
</div>
<div class="toast"></div>
<!-- toast模版 -->
<script type="text/template" charset="utf-8" id='toast_template'>
    <i class="iconfont icon-toast{{=it.icon}}"></i>
    <div class="toast_text">{{=it.text}}</div>
</script>
<script>
    // 页面初始化

    var evalToast = doT.template($("#toast_template").text());
    $(".detail_nav").click(function(){
        $(this).addClass("mx_green").siblings().removeClass("mx_green");
        $($(this).attr("for")).show().siblings().hide()
    })
    loadheadbar("填写认养订单信息");

    // 下一步
    var submited = false;
    $(".raising_mask").submit(function(e){
        e.preventDefault();
        with(this){
            for (var i = 0; i < this.length; i++) {
                if($(this[i]).attr("request")==""){
                    if(!checkone(this[i])){
                        return false;
                    }
                }
            }
            if(submited) return false;
            var data_submit = $(".raising_mask").serializeObject();console.log(data_submit)
            $.post("/shop/order/rasing-pre-pay",data_submit,function(res){console.log(res);
                toast("attention",res.msg);
                if(res.status == 0){
                    submited = true;
                    location.href = res.url;
                }
            },"json")
        }
    })

    // 获取验证码
    var got = false;
    function get_code(){
        var tel = $("input[name='tel']").val();
        var pcode = $("input[name='pcode']").val();
        if(got) return false;
        $.post("/util/sms-code",{pcode:pcode,'tel':tel,'_csrf':"<{$app->request->csrfToken}>"},function(res){
            toast("attention",res.msg);
            if(res.status == 0){
                got = true;
            }
        },"json");
    }



    $(function(){                   //当页面加载的时候
        changeVerifyCode();         //刷新或者重新加载一个验证码
        //清除输入框里面的数据
        $("#clear_form").click(function(){
            $("input").val('');
        });

        var str = '';
        for(var i=1;i<11;i++){
            str += "<option value="+i+">"+i+"头</option>"
        }
        $('#buynum').append(str);
    });

    //更改或者重新加载验证码
    function changeVerifyCode() {
        $.ajax({
            url: "/util/captcha?refresh",
            dataType: 'json',
            cache: false,
            success: function(data) {
                $("#imgVerifyCode").attr('src', data['url']);
            }
        });
    }

</script>


